<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的电子卡</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="{{ url('/common/mobile-common/common.css') }}">
<link rel="stylesheet" href="{{ url('/mobile/css/header.css') }}">		
<link rel="stylesheet" href="{{ url('/mobile/css/card/cardLy.css') }}">	
<script src="{{ url('mobile/js/jquery-1.8.3.min.js') }}"></script>
<script src="{{ url('/common/mobile-common/hmt.js') }}"></script>
</head>
<body>
	<div class="abouts">
		<div class="wrap-cont clearfix">
				<!--生成-->
				<div class="wrap-cont wrap-cont4">
					@foreach($res as $v)
					<div class="cards clearfix">
						<span class="tx-img-span @if($v->is_verify!=1) chang-btn2 @endif"   style="text-align: center">
							<img src="{{ config('config.picHostPrefix').$v->small_img }}" data-id="{{$v->id}}" class="tx-img">
						</span>
						
						@if($v->is_verify!=1&&$v->lock!=1)<a class="chang-btn" data-id="{{$v->id}}">更换头像</a>@endif
						<input type="file" id="photo{{$v->id}}" class="chgeImg" accept="image/*" data-id="{{$v->id}}">
						<div>
							<p>
							<em>账号:</em>
							<span>{{$v->card_num}}</span>
							</p>
							<p>
								<em>密码:</em>
								<span>{{$v->password}}</span>
							</p>
							<p>
								<em>有效期:</em>
								<span>{{App\Http\Util\TimeHelper::formatDate($v->start_time)}} 至 {{App\Http\Util\TimeHelper::formatDate($v->end_time)}}</span>
							</p>
						</div>
						<a class="berw" data-lock="{{$v->lock}}" data-id="{{$v->id}}"><img src="{{ url('mobile/images/ewm.png') }}"></a>
					</div>
					@endforeach
				</div>
				<!--end-->
		</div>
	</div>
	
</body>
<script src="{{ url('/') }}/layer/layer.js"></script>
<script>
	window.confirm = function (message) {
		var iframe = document.createElement("IFRAME");
		iframe.style.display = "none";
		iframe.setAttribute("src", 'data:text/plain,');
		document.documentElement.appendChild(iframe);
		var alertFrame = window.frames[0];
		var result = alertFrame.window.confirm(message);
		iframe.parentNode.removeChild(iframe);
		return result;
	};
	$(function(){
		$(".berw").on("touchstart",function(){
			var lock = $(this).data('lock');
			var id = $(this).data('id');
			var e = $(this);
			$.ajax({
				url: "{{ url('wap/card/lock') }}",
				type: "get",
				dataType: "json",
				data: {id: id},
				success: function (data) {
					if (data.data==1) {
						window.location.href="{{url('wap/card/qrcode')}}/"+id;
					} else {
						if (confirm('请核对上传头像无误，确认后无法更改')) {
							$.ajax({
								url: "{{ url('wap/card/lock') }}",
								type: "post",
								dataType: "json",
								data: {id: id},
								success: function (data) {
									if (data.success) {
										e.parent(".cards").children(".chang-btn").remove();
										window.location.href = "{{url('wap/card/qrcode')}}/" + id;
									}
									else {
										layer.alert(data.msg);
									}
								}
							})
						}
					}
				}
			})
		});

		//点击生成,验证账号密码 上传头像
		$(".btn-sc").on("touchstart",function(){
			var zhNum=$(".zh-num").val();
			var maNum=$(".mm-num").val();
			if(zhNum==''||zhNum=='请输入账号'){
				alert("请输入账号");
				$(".zh-num").focus();
			}
			else if(maNum==''||maNum=='请输入密码'){
				alert('请输入密码');
				$(".mm-num").focus();
			}
			else if(true){				
				$(".in-sc").click();
			}					
		})

		//点击修改头像
		$(".chang-btn2,.chang-btn").click(function () {
			$(this).parent().find(".chgeImg").click();
			$('.chgeImg').on('change',function() {
				var url = "{{ url('wap/card/ecardUpload') }}";
				var cardId = $(this).data('id');
				var id = $(this).attr('id');
				uploadPhoto(id,url,cardId);
			})
		});

		function uploadPhoto(id,url,cardId){
			var fileObj = document.getElementById(id).files[0];
			var form = new FormData();
			form.append("cardId", cardId);
			form.append("photo", fileObj);
			$.ajax({
				url:url,
				type:'post',
				data:form,
				processData: false,
				cache: false,
				contentType: false,
				success:function(data){
					if(data.success){
						location.reload();
					} else {
						layer.alert(data.msg);
						location.reload();
					}
				}
			});
		}
	});
</script>
</html>
